<!--李柯辰-->
<template>
  <div>
    <el-card shadow="hover" style="height: 100px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-row>
          <el-col :span="4">
            <el-form-item label="单据号" prop="supplierId">
              <el-input v-model="ruleForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="供应商" prop="supplierId">
              <el-select v-model="ruleForm.supplierId" placeholder="请选择">
                <!--                <el-option
                                  v-for="item in supplierListOptions"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>-->
                <el-option label="未付款" :value="0"/>
                <el-option label="已付款" :value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否付款" prop="isPaid">
              <el-select v-model="ruleForm.isPaid" placeholder="请选择">
                <el-option label="未付款" :value="0"/>
                <el-option label="已付款" :value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="收货日期">
              <el-date-picker  type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-time-picker  type="fixed-time" placeholder="选择时间" style="width: 100%;" />
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>
    <el-table
      :data="tableData.filter(data => !search
      || data.name.toLowerCase().includes(search.toLowerCase())
      || data.date.toLowerCase().includes(search.toLowerCase()))"
      height="500"
      style="width: 100%">
      <el-table-column>
        <el-table-column
          label="商品编码"
          prop="date">
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="date">
        </el-table-column>
        <el-table-column
          label="商品型号"
          prop="date">
        </el-table-column>
        <el-table-column
          label="商品单位"
          prop="date">
        </el-table-column>
        <el-table-column
          label="单价"
          prop="date">
        </el-table-column>
        <el-table-column
          label="数量"
          prop="date">
        </el-table-column>
        <el-table-column
          label="总金额"
          prop="name">
        </el-table-column>
        <el-table-column
          align="center" >
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope" >
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },],
      search: '',
      supplierListOptions: [],
      ruleForm: {
        supplierId: null,
        payable: 0,
        paid: 0,
        date: '',
        remarks: '',
        isPaid: null
      },
      rules: {
        supplierId: [
          {type: 'number', required: true, message: '请选择品牌', trigger: 'blur'},
        ],
        payable: [
          {required: true, message: '请输入应付金额', trigger: 'blur'},
        ],
        paid: [
          {required: true, message: '请输入实付金额', trigger: 'blur'},
        ],
        date: [
          {type: 'date', required: true, message: '请输入日期', trigger: 'blur'},
        ],
        remarks: [
          {message: '请输入备注', trigger: 'blur'},
        ],
        isPaid: [
          {type: 'number', required: true, message: '请选择是否付款', trigger: 'blur'},
        ]
      }
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('ruleForm');
      if (localRuleFormString) {
        let localRuleForm = JSON.parse(localRuleFormString);
        if (localRuleForm.brandId) {
          this.ruleForm = localRuleForm;
        } else {
          this.ruleForm.categoryId = localRuleForm.categoryId;
          this.ruleForm.categoryName = localRuleForm.categoryName;
        }
      }
    },
    backToPreStep() {
      this.$router.push('spu-add-new');
    },
    loadBrandList() {
      let url = 'http://localhost:9080/brands';
      console.log('url = ' + url);
      this.axios
        .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
        .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.brandListOptions = responseBody.data;
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          /*let url = 'http://localhost:9080/brands/' + this.ruleForm.brandId;
          console.log('url = ' + url);
          this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.ruleForm.brandName = responseBody.data.name;
              let ruleFormString = JSON.stringify(this.ruleForm);
              console.log('ruleFormString >>> ' + ruleFormString);
              localStorage.setItem('ruleForm', ruleFormString);
              this.$router.push('spu-add-new3');
            } else {
              this.$message.error(responseBody.message);
            }
          });*/
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    /*this.loadBrandList();
    this.loadLocalRuleForm();*/
  }
}
</script>
